---
type Props = {
    label: string,
    striketrough?: boolean,
}

const { label, striketrough } = Astro.props as Props
---

<div class="badge">
    <span class={`badge-label ${striketrough ? 'badge-striketrough' : ''}`}>
        {label}
    </span>
</div>

<style is:inline>
    .badge {
        display: inline-block;
        padding: 0 10px;
        border-radius: 1em;
        min-width: 50px;
        text-align: center;
        border-width: 1px;
        border-style: solid;
        border-color: var(--sl-color-gray-3);
    }

    .badge-label {
        font-size: 0.75em;
        font-weight: 600;
        color: var(--sl-color-white);
    }

    .badge-striketrough {
        text-decoration: line-through;
    }
</style>
